<html>
<head>
    <meta charset="utf-8">
    <meta name="author" content="lz">
    <title></title>
    <script src="jQuery/jquery-3.1.1.js"></script>
    <style>
        div{
            width: 80px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            border: 1px solid black;
            /*display: inline-block;*/
        }
        section{
            display: inline-block;
        }
        main{
            width: 500px;
            font: 600px;
            text-align: center;
            margin: 0 auto;
        }
        section:nth-child(2){
            position: relative;
            right: 8px;
        }
        .n1{
            visibility: hidden;
        }
        .n2{
            visibility: hidden;
            
        }
        .p{
            position: relative;
            right: 1px;
        }
        .y,.e{
            border-top: none;
        }
        section:nth-child(2)>div:nth-child(1){
            border-left: none;
        }
        p{
            width: 80px;
            height: 40px;
            /*background-color: salmon;*/
            position: absolute;
            top: 400px;
            left: 48%;
        }
        .y:hover,.e:hover{
            cursor: pointer;
            background-color: #999;
        }
    </style>
</head>
<body>  
    <main>
    <section class="s1">
        <div>销售订单</div>
        <div class="n1 y">订单1</div>
        <div class="n1 y">订单2</div>
        <div class="n1 y">订单3</div>
    </section>
    <section class="s2">
        <div>取消订单</div>
        <div class="n2 e p">消费1</div>
        <div class="n2 e p">消费2</div>
        <div class="n2 e p">消费3</div>
    </section>
    <p></p>
    </main>
</body>
</html>
<script>

    $('.s1>div:nth-child(1)').mouseenter(function(){
        $('.y').removeClass('n1')
        $('.e').addClass('n2')                
    })

    $('.s2>div:nth-child(1)').mouseenter(function(){
        $('.e').removeClass('n2')
        $('.y').addClass('n1')                
    })

    $('.y').each(function(index){
        $(this).click(function(){
            var zz = index+1
            $('p').html('订单'+zz)
            $('.y').addClass('n1')    
        })
    })

    $('.e').each(function(index){
        $(this).click(function(){
            var zz = index+1
            $('p').html('消费'+zz)
            $('.e').addClass('n2')    
        })
    })
</script>